import React from 'react';
import { Row,Col,Input,Button,Modal} from 'antd';
import { Table, Radio, Popover} from 'antd';
import './Client.css'
import { Select } from 'antd';
import { DatePicker } from 'antd';
import {Link} from 'react-router-dom'
import axios from 'axios'

const { RangePicker } = DatePicker;
// import { AudioOutlined } from '@ant-design/icons';
const { Option } = Select;
const { Search } = Input;
const columns = [
    {
        title: '经销商名称',
        dataIndex: 'clientCompany',
        fixed: 'left',
        className:'first'
    },
    {
        title: '经销商编码',
        dataIndex: 'clientId',
        fixed: 'left',
        className:'first'
    },
    {
        title: '登录账号',
        dataIndex: 'username',
        className:'first'
    },
    {
        title: '地区',
        dataIndex: 'clientAddress',
        className:'first'
    },
    {
        title: '所在部门',
        dataIndex: 'clientAddress',
        className:'first'
    },
    {
        title: '级别',
        dataIndex: 'clientLevelId',
        className:'first'
    },
    {
        title: '联系人',
        dataIndex: 'clientName',
        className:'first'
    },
    {
        title: '联系方式',
        dataIndex: 'clientTel',
        className:'first'
    },
    {
        title: '创建时间',
        dataIndex: 'createTime',
        className:'first'
    },
    { title: '状态', dataIndex: 'stateId',  className:'first' },
    { title: '来源', dataIndex: 'clientAddress',  className:'first' },
    {
        align:'center',
        title: '操作',
        fixed: 'right',
        className:'first',
        render: () => <a><Popover placement="leftTop"  content={content} trigger="hover">
          ...
        </Popover></a>,
    },
];

//表格数据
const content = (
    <div className={'List'}>
        <Link to='/homepage/add' ><li>修改</li></Link>
        <li onClick={Del}>删除</li>
    </div>
);
//气泡框

// rowSelection object indicates the need for row selection

function Del() {
    console.log(123)
    axios({
        url:'client/delClient',
        method:'post',
        data:{
            "clientId": "1",
        }
    }).then(res=>{
        console.log(res)
    }
    )
}


function handleChange(value) {
    console.log(`${value}`);
    axios({
        url:'client/queryClientLevel',
        method:'post',
        data:{
            "clientLevelId": 2,
            "clientLevelName":`${value}`,
        }
    }).then(res=>{
            console.log(res)
        // if (res.data.code===200){
        //     this.setState(
        //         {
        //             data:res.data.data.clientLevelId
        //         }
        //     )
        // }
        }
    )

}
//代理搜索请求后台
function seek(value){
    console.log(value)
    axios({
        url:'client/queryClientByCondition',
        method:'post',
        data:{
            "currentPage": 1,
            "inputValue": value,
            "perSize": 3,
            "selectValue": "1"
        }
    }).then(res=>{
        console.log(res)
    })
}
//搜索请求后台

class RD extends React.Component {
    state = {
        value: '全部',
    };

    onChange = e => {
        console.log('radio checked', e.target.value);
        this.setState({
            value: e.target.value,
        });
    };

    render() {
        return (
            <Radio.Group onChange={this.onChange} value={this.state.value}>
                <Radio value={'全部'}>全部</Radio>
                <Radio value={'已开通'}>已开通</Radio>
                <Radio value={'未开通'}>未开通</Radio>
                <Radio value={'禁用'}>禁用</Radio>
            </Radio.Group>
        );
    }
}
//单选
class RD1 extends React.Component {
    state = {
        value: 1,
    };

    onChange = e => {
        console.log('radio checked', e.target.value);
        this.setState({
            value: e.target.value,
        });
    };

    render() {
        return (
            <Radio.Group onChange={this.onChange} value={this.state.value}>
                <Radio value={1}>全部</Radio>
                <Radio value={2}>自主注册</Radio>
                <Radio value={3}>手工创建</Radio>
                <Radio value={4}>批量导入</Radio>
            </Radio.Group>
        );
    }
}
//单选
class App extends React.Component {
    state = { visible: false };

    showModal = () => {
        this.setState({
            visible: true,
        });
    };

    handleOk = e => {
        console.log(e);
        this.setState({
            visible: false,
        });
    };

    handleCancel = e => {
        console.log(e);
        this.setState({
            visible: false,
        });
    };

    render() {
        return (
            <div>
                <span className={'super1'} onClick={this.showModal}>高级搜索</span>
                <Modal
                    width={'85%'}
                    title="高级搜索"
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                >
                    <Row style={{paddingBottom:'16px'}}>
                        <Col>
                            关键字
                        </Col>
                        <Col style={{paddingLeft:'10px'}}>
                            <Input style={{width:'300px'}}  />
                        </Col>
                        <Col  style={{paddingLeft:'100px'}}>
                            业务员
                        </Col>
                        <Col style={{paddingLeft:'10px'}}>
                            <Select defaultValue="" style={{ width: 300}} onChange={handleChange}>
                                <Option value="1">杨经理</Option>
                                <Option value="2">李经理</Option>
                            </Select>
                        </Col>
                    </Row>
                    <Row  style={{paddingBottom:'16px'}}>
                        <Col>
                            经销商
                            <div>级别</div>
                        </Col>
                        <Col style={{paddingLeft:'10px'}}>
                            <Input style={{width:'300px'}}  />
                        </Col>
                        <Col  style={{paddingLeft:'87px'}}>
                            账期类型
                        </Col>
                        <Col style={{paddingLeft:'10px'}}>
                            <Select defaultValue="全部" style={{ width: 300}} onChange={handleChange}>

                            </Select>
                        </Col>
                    </Row>
                    <Row  style={{paddingBottom:'16px'}}>
                        <Col>
                            <Select bordered={false} defaultValue="区域" style={{ width: 100}} onChange={handleChange}>
                                <Option value="区域">区域</Option>
                                <Option value="归属部门">归属部门</Option>
                            </Select>
                        </Col>
                        <Col style={{paddingLeft:'10px'}}>
                            <Select defaultValue="全部" style={{ width: 300}} onChange={handleChange}>

                            </Select>
                        </Col>
                        <Col  style={{paddingLeft:'70px'}}>
                            <Select bordered={false} defaultValue="创建时间" style={{ width: 100}} onChange={handleChange}>
                                <Option value="创建">创建时间</Option>
                                <Option value="签约">签约时间</Option>
                            </Select>
                        </Col>
                        <Col>
                            <RangePicker showTime />
                        </Col>
                    </Row>
                    <Row  style={{paddingBottom:'16px'}}>
                        <Col>
                            经销商
                            <div>标签</div>
                        </Col>
                        <Col style={{paddingLeft:'10px'}}>
                            <Input style={{width:'300px'}}  />
                        </Col>
                        <Col  style={{paddingLeft:'93px'}}>
                           推荐人
                        </Col>
                        <Col style={{paddingLeft:'10px'}}>
                            <Select defaultValue="全部" style={{ width: 100}} onChange={handleChange}>

                            </Select>
                            <Select defaultValue="全部" style={{ width: 200}} onChange={handleChange}>

                            </Select>
                        </Col>
                    </Row>
                    <Row  style={{paddingBottom:'16px'}}>
                        <Col>
                            经销商
                            <div>状态</div>
                        </Col>
                        <Col style={{paddingLeft:'5px'}}>
                             <RD />
                        </Col>
                    </Row>
                    <Row  style={{paddingBottom:'16px'}}>
                        <Col >
                            经销商
                            <div>来源</div>
                        </Col>
                        <Col style={{paddingLeft:'5px'}}>
                            <RD1 />
                        </Col>
                    </Row>
                    <Row  style={{paddingBottom:'16px'}}>
                        <Col>
                            清空
                        </Col>
                        <Col>
                            <Button style={{backgroundColor:'white ', marginLeft:'15px'}} >
                                确定
                            </Button>
                            <Button style={{backgroundColor:'#4BD0B6 ',marginLeft:'15px',color:'white'}} >
                                取消
                            </Button>

                        </Col>
                    </Row>

                </Modal>
            </div>
        );
    }
}
//高级搜索
class Client extends React.Component {
    constructor(){
        super();
        this.state={
            data:'',
            totalCounts:'',

        }
    }
    pageChange =(page)=>{
        console.log(page)
        axios({
            url:'client/queryClientByPage',
            method:'post',
            data:{
                "currentPage":page,
                "perSize": 3,
            }
        }).then(res=>{
            if (res.data.code===200){
                this.setState(
                    {
                        data:res.data.data.clientList,
                        totalCounts:res.data.data.totalCounts
                    }
                )
            }
        })
    }
    render() {
        return (
            <div>
                <Row>
                    <Col  className='FirstCow'>
                        <Select defaultValue="全部级别" style={{ width: 120 }} onChange={handleChange}>
                            <Option value="0">全部级别</Option>
                            <Option value="1">普通</Option>
                            <Option value="2">
                                代签代理
                            </Option>
                            <Option value="3">三级代理</Option>
                            <Option value="4">二级代理</Option>
                            <Option value="5">一级代理</Option>
                        </Select>
                    </Col>
                    <Col style={{paddingTop:'12px'}}>
                        <Search
                            placeholder="请输入客户名称/编码/订单账号/联系人/手机"
                            onSearch={seek}
                            style={{ width: 350 }}
                        />
                    </Col>
                    <Col className={'super'}  style={{paddingTop:'15px'}}>
                       <App/>
                    </Col>
                    <Col  style={{paddingTop:'12px',paddingLeft:'100px'}}>
                        <Button style={{backgroundColor:'#4BD0B6 ',color:'white'} }>
                            导入
                        </Button>
                    </Col>
                    <Col style={{paddingTop:'12px',paddingLeft:'20px'}}>
                        <Button style={{backgroundColor:'#4BD0B6 ',color:'white'}} >
                            导出
                        </Button>
                    </Col>
                    <Col style={{paddingTop:'12px',paddingLeft:'20px'}} >
                        <Link to='/homepage/add'>
                            <Button type="primary">
                                新增
                            </Button>
                        </Link>

                    </Col>
                </Row>
                <Row style={{paddingTop:'-60px'}}>
                    <Table
                        style={{width:'100%'}}
                        columns={columns}
                        dataSource={this.state.data}
                        scroll={{ x: 1500, y: 300 }}
                        pagination={{
                            defaultCurrent:1,
                            defaultPageSize:3,
                            total:this.state.totalCounts,
                            onChange:this.pageChange
                        }}
                    />,
                </Row>
            </div>




        )
    };
    componentDidMount() {
        axios({
            url:'client/queryClientByPage',
            method:'post',
            data:{
                "currentPage":1,
                "perSize": 3,
            }
        }).then(res=>{
            console.log(res.data.data.totalCounts);
            if (res.data.code===200){
                this.setState(
                    {
                        data:res.data.data.clientList,
                        totalCounts:res.data.data.totalCounts
                    }
                )
            }
        }
        )
    }
}


export default Client